<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="stylesheet" href="/adminstatic/base/base.css"/>
    <script src="/adminstatic/base/baseCss.js"></script>


</head>

<body class="fixed-left">
<!-- Begin page -->
<div id="wrapper">
    <div class="container">
        <div class="row" style="padding-top: 10px">
            <div class="col-sm-12">
                <h4 class="pull-left page-title page-nav-title">
                    产品管理
                    <small>共<span id="totalElementsBox">0</span>条记录</small>
                </h4>
                <ol class="breadcrumb pull-right">
                    <li>产品管理</li>
                    <li class="active">产品列表</li>
                </ol>
            </div>
        </div>
        <div class="row">
            <form id="listForm" action="list" method="get">
                <div class="pageConsoleBox" style="background: #fff;margin:0 10px">
                    <div class="panel panel-default listPageHead" style="margin-bottom: 0">
                        <div class="panel-body" style="padding-bottom: 0px">
                            <div class="btnsBox" style="text-align: right">
                                <a class="selectDataBtnV2 btn btn-sm btn-primary" onclick="selectIframePageData(this)"
                                   style="width: 100px; display: none"><i class="si si-plus"></i> 选择</a>
                                <span id="pageHeadAddBtn" class="btn btn-sm layui-btn-normal hidden-xs"><i
                                        class="fa fa-plus"></i>
                                    增加
                            </span>
                                <button class="btn btn-sm layui-btn-warm dropdown-toggle"
                                        onclick="showSearchInputBox(this)"
                                        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa  fa-search"></i> 搜索 <span class="caret"></span>
                                </button>

                            </div>
                            <div class="searchInputBox"
                                 style="padding: 10px;margin:10px 0;margin-bottom:1px;display: none;box-shadow: 0 1px 6px rgba(0, 0, 0, .2)">
                                <div class="form-inline searchInputFilterBox">
                                    <input type="text" class="form-control input-sm" name="search_like_title"
                                           placeholder="产品名称">
                                </div>
                                <div class="searchInputBoxBtn text-right">
                                <span class="btn btn-success btn-sm searchSubmitBtn"><i
                                        class="fa fa-search"></i> 查询</span>
                                    <span class="btn btn-warning btn-sm cleanBtn" onclick="cleanSearch();"
                                          style="color: #fff!important;"><i class="fa fa-times"></i> 清空</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body" style="padding-top: 0px">
                            <div class="table-responsive">
                                <table id="listTable" lay-filter="list"></table>
                            </div>
                        </div>
                    </div>
                </div>

            </form>
        </div>

    </div> <!-- container -->

</div>
<!-- END wrapper -->
<script src="/adminstatic/base/base.js"></script>

<script type="text/html" id="editTpl">
    <span class="btn btn-xs btn-info btn-custom" lay-event="edit"><i class="fa fa-edit"></i> 编辑</span>
    <span class="btn btn-xs btn-danger btn-custom" lay-event="del"><i class="fa fa-trash-o"></i> 删除</span>
</script>
<script type="text/html" id="createdDateTpl">
    {{
    layui.util.toDateString(d.create_date,'yyyy-MM-dd HH:mm:ss')
    }}
</script>
<script type="text/html" id="modifyDateTpl">
    {{
    layui.util.toDateString(d.modify_date,'yyyy-MM-dd HH:mm:ss')
    }}
</script>
<script type="text/html" id="imgTpl">
    {{#  if(d.pic ==null || d.pic ==''){ }}
    <div class="item-group">
        <div class="item-title" style="top: 15px;left: 35px;">
            <div>
                <span style="color:#797979;">没有图片</span>
            </div>
        </div>
    </div>
    {{#  } else {  }}
    <div class="img-item"><img onclick="showimg(this)" style="width: 100%;height: 100%;" src="{{d.pic}}"></div>
    {{# }  }}
</script>

<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table;

        //表格高度计算
        var clientHeight = $(window).height();

        NProgress.start();

        //渲染表格，加载数据
        table.render({
            elem: '#listTable'
            , height: (clientHeight - 150)
            , url: '/admin/product/getList' //数据接口
            , method: 'post'
            , page: true //开启分页
            , text: {
                none: '暂无相关数据' //默认：无数据
            }
            , request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
                $("#totalElementsBox").text(count);
                NProgress.done();
            }
            , cols: [[ //表头
                 {field: 'title', title: '产品名称', sort: true}
                ,{field: '产品图片', title: '产品图片', templet: '#imgTpl', sort: true}
                , {title: '更新时间', templet: '#modifyDateTpl', sort: true}
                , {title: '创建时间', templet: '#createdDateTpl', sort: true}
                , {title: '操作', templet: '#editTpl', fixed: 'right'}
            ]]
        });


        //监听工具条
        table.on('tool(list)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'del') { //删除
                layer.confirm('是否确定删除?', function (index) {
                    //向服务端发送删除指令
                    var id = data.id;
                    postJSON("/admin/product/delete", {'id': id}, function (res) {
                        if (res.type === 'success') {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.msg(res.content, {icon: 1})
                        } else {
                            layer.msg(res.content, {icon: 5})
                        }
                        layer.close(index);
                    })
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    type: 2,
                    title: ['编辑产品', 'text-align: center;'],
                    shadeClose: true,
                    area: ['80%', '80%'],
                    content: '/admin/product/edit?id=' + data.id
                });
            }
        });


        /**
         * 搜索事件
         */
        $(".searchSubmitBtn").click(function () {
            console.log("searchSubmitBtn")
            var $searchInputBox = $(this).parents(".searchInputBox");
            var whereMap = getWhereMap($searchInputBox);
            writeObj(whereMap);

            NProgress.start();
            /** 重新加载表格 */
            table.reload('listTable', {
                where: whereMap //查询条件
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        /**
         * 添加事件
         */
        $("#pageHeadAddBtn").click(function () {
            layer.open({
                type: 2,
                title: ['新增产品', 'text-align: center;'],
                shadeClose: true,
                area: ['80%', '80%'],
                content: '/admin/product/add'
            });
        })

    });

</script>


</body>
</html>